<template>
  <view class="price-component" v-if="product">
    <template  v-if="score <= 0 && product.price > 0">
      <view class="new">
        <view class="unit">￥</view>
        <view class="p">{{ splitPrice[0] }}</view>
        <view class="p dec" v-if="splitPrice[1]">.{{ splitPrice[1] }}</view>
      </view>
      <view class="old" v-if="oldPrice > 0">
        <text class="unit">￥</text>
        <text>{{ oldPrice }}</text>
      </view>
    </template>
    <view class="score" v-if="showScore && score > 0">
      <view class="text">积分:{{score}}</view>
      <view class="num" v-if="price > 0">+￥{{ price }}</view>
    </view>
    <view class="member" v-if="score <=0 && showMember && memberPrice > 0">
      <view class="text">会员价:</view>
      <view class="num">￥{{ memberPrice }}</view>
    </view>
    <view class="sell" v-if="showSell && sell">{{sell}}</view>
  </view>
</template>

<script>
export default {
  props: {
    product: {
      type: Object,
    },
    showMember: {
      type: Boolean,
      default: true
    },
    showSell: {
      type: Boolean,
      default: true
    },
    showScore: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    splitPrice() {
      const price = this.product.price
      const numStr = price.toString()
      let [integerPart, decimalPart] = numStr.split('.')
      if (!decimalPart || decimalPart <= 0) {
        decimalPart = ''
      }
      return [ integerPart, decimalPart ]
    },
    oldPrice() {
      return +this.product.price_old
    },
    price() {
      return +this.product.price
    },
    // 会员价
    memberPrice() {
      return +this.product.price_member
    },
    // 可以使用多少积分
    score() {
      return +this.product.use_score
    },
    // 销量
    sell() {
      const sell = +this.product.sell_count
      let text = ''
      if (sell < 100 && sell > 0) {
        text = `销量: ${sell}`
      }
      if (sell > 100) {
        text = '100+人已下单'
      }
      if (sell > 200) {
        text = '200+人已下单'
      }
      if (sell > 300) {
        text = '500+人已下单'
      }
      if (sell > 500) {
        text = '500+人已下单'
      }
      if (sell > 1000) {
        text = '1000+人已下单'
      }
      if (sell > 2000) {
        text = '2000+人已下单'
      }
      if (sell > 3000) {
        text = '1000+人已下单'
      }
      if (sell > 4000) {
        text = '4000+人已下单'
      }
      if (sell > 5000) {
        text = '5000+人已下单'
      }
      if (sell > 6000) {
        text = '6000+人已下单'
      }
      if (sell > 7000) {
        text = '7000+人已下单'
      }
      if (sell > 8000) {
        text = '1000+人已下单'
      }
      if (sell > 8000) {
        text = '1000+人已下单'
      }
      if (sell > 9000) {
        text = '9000+人已下单'
      }
      if (sell > 9999) {
        text = '超过1万人已下单'
      }
      return text
    }
  }
}
</script>

<style scoped lang="scss">
.new, .old {
  //background: red;
  height: 50rpx;
}
.member, .score, .sell {
  height: 50rpx;
  font-size: 24rpx;
  color: #999999;
  display: flex;
  align-items: center;
  .text {
    display: inline-block;
    background: #fcf8ec;
    color: #e46d69;
    padding: 1rpx 7rpx;
    font-size: 24rpx;
    border: 1rpx solid #ff696f;
    border-radius: 5rpx;
  }
  .num {
    padding-left: 10rpx;
    color: $main_color;
    font-weight: 700;
  }
  &.sell {
    color: #d5ad66;
    //font-weight: 700;
  }
  &.score {
    margin-bottom: 5rpx;
    .text {
      font-size: 20rpx;
    }
    .num {
      font-size: 24rpx;
    }
  }
  &.member {
    .text {
      font-size: 20rpx;
    }
    .num {
      font-size: 24rpx;
    }
  }
}
.price-component {
  .old, .new {
    &.old {
      text-decoration: line-through;
      color: #ccc;
      .unit {
        font-size: $unit;
      }
    }
    &.new {
      font-weight: 700;
      color: #ff5030;
      display: flex;
      align-items: baseline;
      .p {
        font-size: $price;
      }
      .dec {
        font-size: $price_decimal;
      }
      .unit {
        font-size: $unit;
      }
    }
  }
}
</style>
